<style lang="stylus" scoped>
  .tags-box-shadow
    box-shadow inset 0 0 3px 2px hsla(0,0%,39.2%,.1)
  .next-arrow
    right 56px
    border-right 1px solid rgba(0,0,0,0.12)
    border-left 1px solid rgba(0,0,0,0.12)
    border-bottom 1px solid rgba(0,0,0,0.12)
  .actions-group
    width 56px
    border-bottom 1px solid rgba(0,0,0,0.12)
  .scroll-area-border
    border-bottom 1px solid rgba(0,0,0,0.12)
  .last-arrow
    z-index 9
    border-bottom 1px solid rgba(0,0,0,0.12)
    border-right 1px solid rgba(0,0,0,0.12)
</style>

<template>
  <div class="relative-position" style="height: 38px; width: 100%;">
    <q-btn flat dense size="sm" color="primary" icon="arrow_left" class="absolute-left bg-white no-border-radius last-arrow"/>
    <q-scroll-area
      horizontal
      :thumb-style="thumbStyle"
      style="height: 100%; width: 100%"
      class="tags-box-shadow scroll-area-border"
    >
      <div class="row no-wrap q-py-xs" style="height: 100%; width: 100%;margin-right:64px; margin-left: 26px">
        <q-chip
          v-for="tag in visitedViews"
          :key="tag.name+tag.path"
          dense square
          :removable="!tag.meta.affix"
          @remove="closeSelectedTag(tag)"
          :color="isActive(tag)? 'light-blue' : 'white'"
          :text-color="isActive(tag)? 'white' : 'secondary'"
          clickable
          @click="$router.push({ path: tag.path })"
          icon="fiber_manual_record">
          {{ $t(tag.meta.title) }}
        </q-chip>
        <!-- @click="$router.push({ path: tag.path, query: tag.query, fullPath: tag.fullPath })" -->
      </div>
    </q-scroll-area>
    <q-btn flat dense size="sm" color="primary" icon="arrow_right" class="absolute-right bg-white no-border-radius next-arrow"/>
    <q-btn-dropdown flat dense size="sm" icon="settings" color="primary" class="absolute-right bg-white no-border-radius actions-group">
      <q-list dense>
        <q-item clickable v-close-popup @click="closeAllTags(selectedTag)">
          <q-item-section>
            <q-item-label>关闭所有</q-item-label>
          </q-item-section>
        </q-item>

        <q-item clickable v-close-popup @click="closeOthersTags">
          <q-item-section>
            <q-item-label>关闭其他</q-item-label>
          </q-item-section>
        </q-item>

        <q-item clickable v-close-popup @click="refreshSelectedTag(selectedTag)">
          <q-item-section>
            <q-item-label>刷新当前</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>
  </div>
</template>

<script>
import path from 'path'
import wpRoutes from 'src/router/wpRoutes'
export default {
  props: {

  },
  data () {
    return {
      thumbStyle: {
        borderRadius: '5px',
        backgroundColor: '#31ccec',
        height: '5px',
        opacity: 0.75
      },
      selectedTag: {},
      affixTags: []
    }
  },
  computed: {
    visitedViews () {
      return this.$store.state.tagsView.visitedViews
    }
  },
  watch: {
    $route (route) {
      this.selectedTag = route
      this.addTags()
      this.moveToCurrentTag()
      console.log(this.visitedViews, 'visitedViews')
      console.log(this.$store.state.tagsView.cachedViews, 'cachedViews')
    }
  },
  mounted () {
    this.initTags()
    this.addTags()
  },
  methods: {
    isActive (route) {
      return route.path === this.$route.path
    },
    filterAffixTags (routes, basePath = '/') {
      let tags = []
      routes.forEach(route => {
        const tagPath = path.resolve(basePath, route.path)
        if (route.meta && route.meta.affix) {
          tags.push({
            fullPath: tagPath,
            path: tagPath,
            name: route.name,
            meta: { ...route.meta }
          })
        }
        if (route.children) {
          const tempTags = this.filterAffixTags(route.children, tagPath)
          if (tempTags.length >= 1) {
            tags = [...tags, ...tempTags]
          }
        }
      })
      return tags
    },
    initTags () {
      const affixTags = this.affixTags = this.filterAffixTags(wpRoutes)
      for (const tag of affixTags) {
        // Must have tag name
        if (tag.name) {
          this.$store.dispatch('tagsView/addVisitedView', tag)
        }
      }
    },
    addTags () {
      const { name } = this.$route
      if (name) {
        this.$store.dispatch('tagsView/addView', this.$route)
      }
      return false
    },
    moveToCurrentTag () {
      // this.$nextTick(() => {
      //   for (const tag of tags) {
      //     if (tag.to.path === this.$route.path) {
      //       this.$refs.scrollPane.moveToTarget(tag)
      //       // when query is different then update
      //       if (tag.to.fullPath !== this.$route.fullPath) {
      //         this.$store.dispatch('tagsView/updateVisitedView', this.$route)
      //       }
      //       break
      //     }
      //   }
      // })
    },
    refreshSelectedTag (view) {
      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
        const { fullPath } = view
        this.$nextTick(() => {
          this.$router.replace({
            path: '/redirect' + fullPath
          })
        })
      })
    },
    closeSelectedTag (view) {
      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
        if (this.isActive(view)) {
          this.toLastView(visitedViews, view)
        }
      })
    },
    closeOthersTags () {
      this.$router.push(this.selectedTag)
      this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then((arg) => {
        this.moveToCurrentTag()
      })
    },
    closeAllTags (view) {
      this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
        if (this.affixTags.some(tag => tag.path === view.path)) {
          return
        }
        this.toLastView(visitedViews, view)
      })
    },
    toLastView (visitedViews, view) {
      const latestView = visitedViews.slice(-1)[0]
      if (latestView) {
        this.$router.push(latestView)
      } else {
        // now the default is to redirect to the home page if there is no tags-view,
        // you can adjust it according to your needs.
        if (view.name === 'Dashboard') {
          // to reload home page
          this.$router.replace({ path: '/redirect' + view.fullPath })
        } else {
          this.$router.push('/')
        }
      }
    }
  }
}
</script>
